<template>
  <div>
    <!--搜索表单-->
    <div style="padding-bottom: 20px">
      <el-input style="width: 240px" aria-placeholder="请输入联系方式"></el-input>
      <el-input style="width: 240px; margin-left: 5px" aria-placeholder="请输入联系方式"></el-input>
      <el-button style="margin-left: 5px" type="primary"><i class="el-icon-search"></i>搜索</el-button>
    </div>

    <!--表格-->
    <el-table :data="tableData" stripe> <!--stripe代表斑马线样式-->
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="student_num" label="学生证号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="professional" label="专业"></el-table-column>
      <el-table-column prop="college" label="学院"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="permissions" label="权限等级"></el-table-column>
    </el-table>

    <!--分页-->
    <div style="margin-top: 20px">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="5"
          :total="100">  <!--:total="tableData.length"-->
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data(){
    return{
      tableData: [

      ]
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      //fetch vue自带的网页请求方法
      fetch('http://localhost:9090/reader/list').then(res =>res.json()).then(res =>{
        console.log(res)
        this.tableData = res
      })
    }
  }

}
</script>
